<template>
  <div class="login"
       v-if="!isLogin&&isShow">
    <div class="saoma">
      <span><i class="el-icon-close"
           @click="changeShow"></i></span>
      <h1>扫码登录</h1>
      <div><img :src="qrimgs"
             alt=""></div>
      <p>{{ message }}</p>
      <h4>使用<a style="color:blue"
           href="https://music.163.com/#/download">网易云app扫码</a>登录</h4>
      <h6>选择其他方式登录<i class="el-icon-arrow-right"></i></h6>
    </div>
  </div>
</template>
<script>
import { getQrKey, createQr, checkQr } from '@/api/User'
import { mapState, mapMutations } from 'vuex'
export default {
  name: 'Login',
  data () {
    return {
      isShow: true,
      key: '',
      qrimgs: '',
      message: '',
      profile: {},//用户状态信息
    }
  },
  methods: {
    ...mapMutations(['UPDATEDISLOGIN']),
    changeShow () {
      this.isShow = false
      window.clearTimeout(this.timer)
    },
    /* 获取二维码key */
    async getKey () {
      const res = await getQrKey()
      if (res.code !== 200) return this.$message.error('获取二维码失败')
      this.key = res.data.unikey
      this.createQr()
    },
    // 
    /* 生成二维码 */
    async createQr () {
      const res = await createQr(this.key)
      if (res.code !== 200) return this.$message.error('生成二维码失败')
      this.qrimgs = res.data.qrimg
      this.checkQr()
    },
    /* 800 为二维码过期,801 为等待扫码,802 为待确认,803 为授权登录成功(803 状态码下会返回 cookies) */
    /* 检查二维码状态 */
    async checkQr () {
      const res = await checkQr(this.key)
      this.message = res.message
      if (res.code === 801 || res.code === 802) {
        this.timer = window.setTimeout(() => {
          this.checkQr()
        }, 5000)
      } else if (res.code === 803) {
        this.$message.success('登陆成功！')
        /* 离开登录组件时，获取登录信息 */
        this.$store.dispatch('getAcount')
        if (this.$router.path !== "/personrecom") {
          this.$router.push("/personrecom")
        }
      }
    },
  },
  computed: {
    ...mapState({
      action: (state) => {
        return state.user.action;
      },
      isLogin: (state) => {
        return state.user.isLogin
      },
    })
  },
  created () {
    // this.getKey()
    if (this.isLogin === false && this.isShow === true) {
      this.getKey()
    } else {
      // this.UPDATEDISLOGIN()
    }
  },
}
</script>

<style lang="less" scoped>
.saoma {
  height: 460px;
  width: 300px;
  position: absolute;
  top: 140px;
  left: 40%;
  background-color: #fff;
  box-shadow: 0px 10px 20px rgba(16, 16, 16, 0.2);
  z-index: 40;
  span {
    i {
      display: block;
      float: right;
      margin-right: 10px;
      margin-top: 10px;
      cursor: pointer;
    }
  }
  h1 {
    font-weight: lighter;
    font-size: 30px;
    text-align: center;
    margin-top: 70px;
  }
  div {
    img {
      width: 150px;
      height: 150px;
      margin-left: 75px;
      margin-top: 20px;
    }
  }
  p {
    text-align: center;
    font-size: 14px;
    margin-top: 10px;
  }
  h4 {
    font-weight: lighter;
    text-align: center;
    margin-top: 10px;
    font-size: 14px;
  }
  h6 {
    font-weight: lighter;
    text-align: center;
    margin-top: 70px;
  }
}
</style>